엘리먼트와 컴포넌트의 차이

엘리먼트(Element)#

엘리먼트는 UI를 구성하는 가장 작은 단위로, 화면에 표시하려는 것을 기술한다.

• 정의: 화면에 표시되는 실제 DOM 노드나 React와 같은 프레임워크에서는 가상 DOM 노드를 의미한다.
• 특성: 엘리먼트는 일반적으로 불변(immutable)이다. 즉, 생성된 후에는 자식이나 속성을 변경할 수 없다.
• React에서의 예시: React.createElement() 함수로 생성 되거나 JSX를 통해 선언적으로 작성된다.

컴포넌트(Component)#

컴포넌트는 재사용 가능한 독립적인 모듈로, UI의 일부를 구성한다.

• 정의: 엘리먼트들의 집합을 캡슐화하여 재사용 가능한 단위로 만든 것이다.
• 특성:
  • 자체상태(state)와 라이프사이클을 가질 수 있다.
  • props를 통해 데이터를 전달받아 처리할 수 있다.
  • 재사용성과 모듈화를 위해 설계된다.
• React에서의 예시:

  JavaScriptjs
  Copy
  

핵심 차이점#

1. 추상화 수준:

   • 엘리먼트: 낮은 수준의 추상화로, UI의 실제 표현을 정의한다.
   • 컴포넌트: 높은 수준의 추상화로, 엘리먼트들을 조합하여 기능적 단위를 형성한다.

2. 재사용성:

   • 엘리먼트: 단일 인스턴스로, 그 자체로는 재사용하기 어렵다.
   • 컴포넌트: 재사용을 목적으로 설계되어 다양한 상황에서 활용 가능하다.

3. 동작 방식:

   • 엘리먼트: 단순히 화면에 표시라 것을 기술하는 객체이다.
   • 컴포넌트: 로직과 상태를 포함하여 동적으로 엘리먼트를 생성하고 조작한다.

4. 생명주기:

   • 엘리먼트: 생명주기가 없으며, 단순히 렌더링 결과물의 스냅샷이다.
   • 컴포넌트: 마운트, 업데이트, 언마운트 등의 생명주기를 가진다.